/* 
1. 文本框里面输入内容，按下回车，就可以生成待办事项
2. 点击待办事项复选框，就可以把当前数据添加到已完成事项里面。
3. 点击已完成事项复选框，就可以把当前数据添加到待办事项里面。
4. 但是本页面内容刷新页面不会丢失
*/

/* 
1. 刷新页面不会丢失数据，因此需要用到本地存储localStorage
2. 核心思路：不管按下回车，还是点击复选框，都是把本地存储的数据加载到页面中，这样保证刷新关闭页面不会丢失数据
3. 存储的数据格式：var todolist = [{title: 'xxx' , done:false}]
4. 注意点1：本地存储localStorage里面只能存储字符串格式，因此需要把对象转换为字符串JSON.stringify(data)
5. 注意点2：获取本地存储数据，需要把里面的字符串转换为对象格式JSON.parse()我们才能使用里面的数据。
*/

// 在按下enter键时取出localStorage的数据
$(function () {
    $("#title").on("keyup", function (e) {
        var value = $(this).val();
        // 如果按下的是enter，并且input的值不为空则执行以下操作
        if (e.keyCode == 13 && value) {
            // 接收localStorage已有的数据
            var data = localStorage.getItem("todo");
            // 将字符串转换为对象
            data = JSON.parse(data);
            if (data) {
            } else {
                // 如果localStorage当中没有数据，先将对象转换为数组
                data = [];
            }
            // 将当前input的值添加到data当中
            data.push({ title: value, done: false });
            // 清除原有的"todo"
            localStorage.removeItem("todo");
            // 将data再次转换为字符串，并存储在localStorage的"todo"标签下
            localStorage.setItem("todo", JSON.stringify(data));
            // 调用li生成函数，更新li列表
            creatLi(data, "#todolist");


            // localStorage.setItem();

        }
    });
    // 点击勾选之后将li转移到已经完成栏 交换函数
    turnLi("#todolist");
    turnLi("#donelist");
    function turnLi(list) {
        $(list).on("click", "input", function () {
            if (list == "#todolist") {
                var whatDo = "todo";
                var otherDo = "done";
                var otherList = "#donelist";
            } else if (list == "#donelist") {
                var whatDo = "done";
                var otherDo = "todo";
                var otherList = "#todolist";
            }
            console.log(whatDo);
            var index = $(this).parent().attr("data-index");


            var data = localStorage.getItem(whatDo);
            // 将字符串转换为对象
            data = JSON.parse(data);
            // console.log( data[index].done);
            if(data[index].done) {
                data[index].done = false;
            } else {
                data[index].done = true;
            }
           
            localStorage.setItem(whatDo, JSON.stringify(data));
            whetherDone(otherList, otherDo);
            removeLol(data, index, list, whatDo);
            showLi(list, whatDo);
            
        });
    };


    function whetherDone(list, whatDo) {
        if (whatDo == "done") {
            var otherDo = "todo";
        } else if (whatDo == "todo") {
            var otherDo = "done";
        }
        var onData = localStorage.getItem(whatDo);
        var data = localStorage.getItem(otherDo);
        // 将字符串转换为对象
        data = JSON.parse(data);
        onData = JSON.parse(onData);
        console.log(onData);
        if (onData) {

        } else {
            onData = [];
        }
        $.each(data, function (i, ele) {
            console.log(ele.done);
            if(whatDo == "done"){
                if (ele.done) {
                    onData.push(ele);
                };
            } else if(whatDo == "todo") {
                if (!ele.done) {
                    onData.push(ele);
                };
            };
            
        });
        localStorage.removeItem(whatDo);
        localStorage.setItem(whatDo, JSON.stringify(onData));
        showLi(list, whatDo);
    }











    function creatLi(arr, list) {
        // 先将之前生成的li移除
        $(list).children("li").remove();
        // 遍历传过来的数组，生成和数组长度相同个数的li
        for (var i = 0; i < arr.length; i++) {
            // console.log(arr[i].title);

            var li = $("<li></li>");

            // 给li添加自定义属性
            li.attr("data-index", i);
            // 在li当中加入input、p、a标签
            li.html("<input type='checkbox'><p>" + arr[i].title + "</p><a href='#'></a>");
            // 从头部插入ul当中，使得后添加的排在前面
            $(list).prepend(li);
        };
        if (list == "#todolist") {
            $("#todocount").html($("#todolist").children("li").length);
        } else if(list == "#donelist") {
            $("#donecount").html($("#donelist").children("li").length);
            $("#donelist").find("input").prop("checked",true);
        }


    };
    
    showLi("#todolist", "todo");
    showLi("#donelist", "done");
    function showLi(list, whatDo) {
        var data = localStorage.getItem(whatDo);
        data = JSON.parse(data);
        // console.log(Array.isArray(data));
        if (data) {
            creatLi(data, list);
        } else {
            $(list).children("li").remove();
        };
    };

    delLi("#todolist", "todo");
    delLi("#donelist", "done");
    function delLi(list, whatDo) {
        $(list).on("click", "a", function () {
            var data = localStorage.getItem(whatDo);
            // 将字符串转换为对象
            data = JSON.parse(data);

            var index = $(this).parent().attr("data-index");
            // console.log("data-index是" + index);
            removeLol(data, index, list, whatDo);
            showLi(list, whatDo);
        });
    }


    function removeLol(data, index, list, whatDo) {
        var newArr = [];
        if (data.length == 1) {
            localStorage.removeItem(whatDo);
            if (list == "#todolist") {
                $("#todocount").html("0");
            } else if (list == "#donelist") {
                $("#donecount").html("0");
            }
        } else {
            for (var i = 0; i < data.length; i++) {
                if (i == index) { i++ };
                if (i != data.length) {
                    newArr.push(data[i]);
                };
            };
            localStorage.removeItem(whatDo);
            localStorage.setItem(whatDo, JSON.stringify(newArr));
            if (list == "#todolist") {
                $("#todocount").html(newArr.length);
            } else if (list == "#donelist") {
                $("#donecount").html(newArr.length);
            };

        };

    };






})